/*整体面板*/
.ykl-layout{
    min-width: 300px;
    max-width: 640px;
    margin:0 auto;
}

[v-cloak] {
  display: none !important;
}
/*按钮*/
.btn{
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
}
.btn-blue{
  background-color:#76A6F0;
}
.btn-red{
  background-color:#E64340;
}
.btn-large{
  width:100%;
  height:46px;
  border-radius:5px;
  font-size:18px;
}
/*单选按钮*/
.radio{
  display: inline-block;
  width:22px;
  height:22px;
  border-radius:50%;
  margin-right: 6px;
  border:1px solid #e6e6e6;
}
.radio.checked{
  border:1px solid #1AAD16;
  background-color:#1AAD16;
  line-height:22px;
  text-align:center;
}
.radio.checked.iconfont{
  color:#fff;
  font-size:14px;
}
/*Switch切换按钮*/
.switch-btn{
  display: inline-block;
  margin-right: 4px;
  position: relative;
  width: 42px;
  height: 24px;
  background-color: #ddd;
  border-radius: 12px;
}
.switch-btn i{
  position: absolute;
  top:50%;
  transform: translateY(-50%);
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: #fff;
  transition: left 0.2s ease-in-out;
}
.switch-btn.open i{
  left: 18px;
}
.switch-btn.open{
  background-color: #32C431;
}
/*模态组件*/
.msg-modal .msg-modal-mask{
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}
.msg-modal .msg-modal-content{
  position: absolute;
  top:160px;
  left: 37px;
  right: 37px;
  min-height: 100px;
  background: #fff;
  border-radius: 5px;
  z-index: 1000;
}
.msg-modal .msg-modal-content .title{
  font-size: 18px;
  font-weight:bold;
  text-align: center;
  color: #333;
  padding: 20px;
  position: relative;
}
.msg-modal .msg-modal-content .title .close{
  position: absolute;
  top:12px;
  right: 12px;
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
  color: #37BC9B;
  opacity: 0.8;
}
.msg-modal .msg-modal-content .text{
  min-height:50px ;
  text-align: center;
  font-size: 16px;
  color: #888;
  line-height: 30px;
  padding: 0px 10px 10px 10px;
}
.msg-modal .msg-modal-content .foot{
  display: flex;
  border-top: 1px #e6e6e6 solid;
}
.msg-modal .msg-modal-content .foot .msg-modal-btn{
  text-align: center;
  padding: 15px 0px;
  color: #4d4d4d;
  font-size: 16px;
  border-right:1px #e6e6e6 solid;
}
.msg-modal .msg-modal-content .foot .msg-modal-btn:last-child{
  border-right:0;
}
.msg-modal .msg-modal-content .foot .btnOk{
  color:#76a6f0;
  flex: 1;
}
.msg-modal .msg-modal-content .foot .btnNo{
  width: 50%;
}
.msg-modal.msg-modal-toast{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10099;
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}
.msg-modal.msg-modal-toast .msg-modal-toast-content{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 260px;
  min-width: 80px;
  min-height: 20px;
  padding: 10px;
  line-height: 1.5;
  font-size: 14px;
  color: #fff;
  background: rgba(0,0,0,0.7);
  border-radius: 6px;
}
.msg-modal.msg-modal-toast .msg-modal-toast-content .iconfont{
    font-size: 40px;
}
.msg-modal.msg-modal-toast .icon-jiazaizhong-copy{
    animation: toasticonrotate 1s steps(50) infinite; 
}
@keyframes toasticonrotate{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
.msg-modal.msg-modal-tip{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10099;
  width: 100%;
  height: 100%;
} 
.msg-modal.msg-modal-tip .msg-modal-tip-content{
  box-sizing: border-box;
  max-width:640px;
  min-width:300px;
  margin:0 auto;
  padding: 0 15px;
  font-size: 14px;
  line-height:32px;
  text-align:center;
  color: #fff;
  background:#E64340;
  transition:all 0.4s ease;
  -webkit-transform:translateZ(0) translateY(-100%);
}
.msg-modal.msg-modal-tip .msg-modal-tip-content.show{
  -webkit-transform:translateZ(0) translateY(0);
}
/*定位居中*/
.position-center{
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
/*文章列表*/
.info-content{

}
.info-content .info-content-item{
  margin-bottom: 10px;
}
.info-content .info-content-item .node-time{
  padding-bottom:10px;
  font-size:14px;
  color:#888;
}
.info-content .info-content-item .content-msg{
   display:flex;
   background-color:#fff;
   padding:10px;
}
.info-content .info-content-item .content-msg img{
   width:118px;
   height:100px;
}
.info-content .info-content-item .content-msg>div{
  flex:1;
  margin-left:20px;
  line-height:24px;
}
.info-content .info-content-item .content-msg .content-msg-title{
  font-size:20px;
  color:#353535;
  font-weight:bold;
}
.info-content .info-content-item .content-msg .content-msg-time{
  font-size:14px;
  color:#888;
}
.info-content .info-content-item .content-msg .content-msg-text{
  font-size:16px;
  color:#888;
} 

.info-content .info-content-item .share-msg{
   display:flex;
   background-color:#fff;
   padding:10px;
}
.info-content .info-content-item .share-msg img{
   width:60px;
   height:60px;
   border-radius:50%;
}
.info-content .info-content-item .share-msg>div{
  flex:1;
  margin-left:20px;
  line-height:24px;
}
.info-content .info-content-item .share-msg h3{
  display:flex;
  justify-content:space-between;
  margin-bottom:5px;
}
.info-content .info-content-item .share-msg .share-msg-title{
  flex:1;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:20px;
  color:#353535;
  font-weight:bold;
}
.info-content .info-content-item .share-msg  .share-msg-author{
  margin-left:10px;
  font-size:14px;
  color:#888;
}

.info-content .info-content-item .share-msg .share-msg-text{
  font-size:16px;
  color:#888;
}  